<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>float</title>
    <style>
        .wrapper {
            border: solid 2px #0e0;
            margin: 8px;
        }
        
        [id^="div"] {
            height: 40px;
            width: 40px;
        }
        
        #div1 {
            float: left;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div style="background-color: Red;" id="div1-1"></div>
        <div style="background-color: Green;" id="div1-2"></div>
        <div style="background-color: Yellow;" id="div1-3"></div>
    </div>
    <div class="wrapper">
        <div style="background-color: Red;float: left" id="div2-1"></div>
        <div style="background-color: Green;" id="div2-2"></div>
        <div style="background-color: Yellow;" id="div2-3"></div>
    </div>
    </div>
    <div class="wrapper">
        <div style="background-color: Red;float: left" id="div3-1"></div>
        <div style="background-color: Green;float: left" id="div3-2"></div>
        <div style="background-color: Yellow;float: left" id="div3-3"></div>
    </div>
    <div class="wrapper" style="margin-top: 60px;">
        <div style="background-color: Red;float: left" id="div3-1"></div>
        <div style="background-color: Green;float: left" id="div3-2"></div>
        <div style="background-color: Yellow;float: left" id="div3-3"></div>
        <div style="clear: both;"></div>
    </div>
    <div class="wrapper">
        <div style="height: 50px; width: 50px; background-color: Red;" id="div1"></div>
        <div style="height: 100px; width: 100px; background-color: Green;">
            11111111111 11111111111
        </div>
    </div>
</body>

</html>